<template>
    <qf-table :columns="columns" :tableData="tableData" :tableLoading="tableLoading">
        <!-- 产品图片 -->
        <template v-slot:orderDetail[0].imageUrl="{ row }">
            <img :src="row.orderDetail[0].imageUrl" width="100" alt="">
        </template>
        <!-- 操作按钮 -->
        <template v-slot:action="{ row }">
            <el-button size="small" type="primary" :disabled="row.order_status === 4 || row.pay_status == 1"
                @click="pay(row)">支付</el-button>
            <el-button size="small" type="danger">删除</el-button>
        </template>
        <!-- 支付状态 -->
        <template v-slot:pay_status="{ row }">
            {{ row.pay_status === 0 ? "支付状态" : "已支付" }}
        </template>
        <!-- 订单状态 -->
        <template v-slot:order_status="{ row }">
            {{ orderStatus(row) }}
        </template>
    </qf-table>

</template>
<script setup>
import * as api from "@/api/pay"
import { ref } from "vue"
import qfTable from "@/components/qfTable/index.vue"
import { useRouter } from "vue-router"
let router = useRouter()
//定义表格的列
let columns = ([
    {
        label: '产品图片',
        prop: "orderDetail[0].imageUrl"
    },
    {
        label: '订单编号',
        prop: 'order_id'
    },
    {
        label: '产品名称',
        prop: 'orderDetail[0].productName'
    },
    {
        label: '数量',
        prop: 'orderDetail[0].quantity'
    },
    {
        label: '总价格',
        prop: 'total_fee'
    },
    {
        label: '创建时间',
        prop: 'create_time'
    },
    {
        label: '支付状态',
        prop: 'pay_status'
    },
    {
        label: '订单状态',
        prop: 'order_status'
    },
    {
        label: '操作',
        prop: "action"
    }

])

//表格数据
let tableData = ref([])


//请求数据


//声明加loading载动画
let tableLoading = ref(false)

let getList = async () => {
    tableLoading.value = true
    try {
        let res = await api.getOrderApi()
        tableData.value = res.data.data
        tableLoading.value = false
    } catch (e) {
        console.log(e);
        tableLoading.value = false
    }
}
getList()

//订单状态
//订单状态：0未提交 1提交成功 2已取消 3无效订单 4.交易关闭 5退货

let orderStatus = (row) => {
    switch (row.order_status) {
        case 0:
            return '未提交'
        case 1:
            return '提交成功'
        case 2:
            return '已经取消'
        case 3:
            return '无效订单'
        case 4:
            return '交易关闭'
        case 5:
            return '退货'
    }
}



//去支付

let pay = (row) => {
    router.push('pay/payment?order_id=' + row.order_id)
}





</script>
<script>
export default {
    meta: {
        name: "订单管理",
        title: "order",
        icon: 'icon-dingdanjihe'
    }
}
</script>